<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WoSmart直播电商</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <link href="https://cdn.bootcdn.net/ajax/libs/uikit/3.5.9/css/uikit.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./live.css">
</head>
<body>


<div >
    <div class="bannerWrap uk-flex">
        <div class="uk-container uk-flex uk-flex-between uk-flex-1" >
            <div class="uk-margin-large-top" uk-scrollspy="cls: uk-animation-slide-left;repeat:true">
                <p class="colorWhite mainTip">用户端APP / 主播端APP / 小程序 / H5 / 后台管理监控系统</p>
                <h1 class="mainTitle">WoSmart多商户直播电商解决方案</h1>
                <p class="colorWhite mainTip">电商 + 直播 + 短视频 + 分销 助力商家开启直播带货 抓住流量风口</p>
                <button class="uk-button uk-button-primary uk-text-600 uk-button-large " style="background-color:#f44336;font-size: 1.3rem">购买源码或咨询定制开发</button>
            </div>
            <div class="bannerImgBox" uk-scrollspy="cls: uk-animation-slide-right;repeat:true">
                <img src="./img/funcScreen/homeScreen.png" class="iphone" alt="">

            </div>
        </div>


    </div>

    <div class="features uk-container-large uk-margin-auto" uk-scrollspy="cls:uk-animation-scale-up">
        <ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-5@s uk-text-center uk-padding-small" uk-sortable="handle: .uk-sortable-handle" uk-grid>
            <li>
                <div class="uk-flex">
                    <img src="./img/icon-top/icon-top1.png" class="iconTop" alt="">
                    <div class="uk-text-left uk-margin-left">
                        <h4 class="uk-margin-small-bottom uk-text-600">源码销售</h4>
                        <p class="uk-text-meta uk-margin-small-top">支持源码合作与二次开发</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-flex">
                    <img src="./img/icon-top/icon-top2.png" class="iconTop" alt="">
                    <div class="uk-text-left uk-margin-left">
                        <h4 class="uk-margin-small-bottom uk-text-600">独立部署</h4>
                        <p class="uk-text-meta uk-margin-small-top">独立品牌一次投入永久使用</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-flex">
                    <img src="./img/icon-top/icon-top4.png" class="iconTop" alt="">
                    <div class="uk-text-left uk-margin-left">
                        <h4 class="uk-margin-small-bottom uk-text-600">长期迭代升级</h4>
                        <p class="uk-text-meta uk-margin-small-top">自主研发，长期维护升级更新</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-flex">
                    <img src="./img/icon-top/icon-top3.png" class="iconTop" alt="">
                    <div class="uk-text-left uk-margin-left">
                        <h4 class="uk-margin-small-bottom uk-text-600">定制开发</h4>
                        <p class="uk-text-meta uk-margin-small-top">定制开发 满足个性化需求</p>
                    </div>
                </div>
            </li>

            <li>
                <div class="uk-flex">
                    <img src="./img/icon-top/icon-top5.png" class="iconTop" alt="">
                    <div class="uk-text-left uk-margin-left">
                        <h4 class="uk-margin-small-bottom uk-text-600">6年技术沉淀</h4>
                        <p class="uk-text-meta uk-margin-small-top">深耕直播研发</p>
                    </div>
                </div>
            </li>
        </ul>

    </div>

    <div class="scene uk-container-large uk-margin-auto uk-text-center uk-margin-large-top" uk-scrollspy="cls:uk-animation-slide">
        <h1 class="uk-text-600 wrapTitle">电商直播应用场景，开启直播私域新时代</h1>
        <ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-5@s uk-text-center uk-flex-between uk-margin-medium-top" uk-sortable="handle: .uk-card" uk-grid>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605667060577&di=46ebc2bc6db876240ca45a177be12075&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191210%2F4277c09865e845acb05780ebeab4dffe.jpeg" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <h3 class="uk-h4  uk-margin-remove">电商直播</h3>
                </div>
            </li>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605679956980&di=b52733243ff83d308bd9afe7d746f21b&imgtype=0&src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fnote%2Fl%2Fpublic%2Fp70698791.jpg" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <p class="uk-h4 uk-margin-remove">主播带货</p>
                </div>
            </li>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605682247007&di=dc28f1740e36f5b3d979cbfe9a1763b5&imgtype=0&src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F9f510fb30f2442a7ba644df0bc7a3e4dd1130238.png%3Ftoken%3Dd979e09cc5f59766dce368e76521586b" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <p class="uk-h4 uk-margin-remove">在线促销</p>
                </div>
            </li>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605682346323&di=d771eab5b72232169cb589d514d84002&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11074927098%2F0.jpg" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <p class="uk-h4 uk-margin-remove">商场购物直播</p>
                </div>
            </li>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1932418071,2800761939&fm=26&gp=0.jpg" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <p class="uk-h4 uk-margin-remove">全民平台直播</p>
                </div>
            </li>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2947283204,508699430&fm=26&gp=0.jpg" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <p class="uk-h4 uk-margin-remove">户外品牌营销直播</p>
                </div>
            </li>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605683092636&di=abf3b1a9d358c47bfad73a033f4d30cd&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191223%2Fe1764f7c91c54068ba8a31d1d0be2ac0.png" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <p class="uk-h4 uk-margin-remove">MCN机构直播</p>
                </div>
            </li>
            <li class="uk-position-relative uk-transition-toggle" >
                <img class="sceneImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605683163077&di=fe9388f8e9189c75e4cc91f38f2c1e65&imgtype=0&src=http%3A%2F%2Fwww2.autoimg.cn%2Fnewsdfs%2Fg6%2FM05%2F7A%2FA0%2Fautohomecar__wKgHzVj-w_-AAYSpABWytKbWot8051.png" alt="">
                <div class=" uk-position-bottom uk-overlay uk-overlay-primary">
                    <p class="uk-h4 uk-margin-remove">新品发布直播</p>
                </div>
            </li>
        </ul>
    </div>


<div style="background-color: #262835"  class="functionWrap uk-margin-large-top">
    <div class="uk-container uk-text-center uk-margin-medium-top">
        <h1 class="colorWhite wrapTitle uk-text-600">直播功能展示</h1>
        <p class="colorWhite">全面直播功能，APP/H5/小程序多端流量加持、搭建您的专属直播平台</p>
        <div class="uk-flex">
        <ul id="funcUl" class="uk-grid-small uk-child-width-1-2 uk-child-width-1-5@s uk-flex-1 uk-margin-medium-top"  uk-scrollspy="cls: uk-animation-slide-left; target: li; delay: 100; "  uk-grid>
            <li>
                <img src="img/icon-function/icon-liveSeckill.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播秒杀</p>
            </li>
            <li>
                <img src="img/icon-function/icon-appraise.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">点赞评论</p>
            </li>
            <li>
                <img src="img/icon-function/icon-live1.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">录制回放</p>
            </li>
            <li>
                <img src="img/icon-function/icon-live2.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">全程录制</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-beauty.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播特效</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-goodsBox.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">商品管理</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-liveManage.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播管理</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-goodsManage.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播商品库</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-anlyse.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">数据统计</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-invite.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播邀请码</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-coupon.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">限时优惠券</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-barrage.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">点赞弹幕</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-poster.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播间海报</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-distribution.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">三级分销</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-groupBooking.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">拼团营销</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-seckill.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">秒杀营销</p>
            </li><li class="colorWhite">
            <img src="img/icon-function/icon-B2B.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">B2B2C电商平台</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-shortVideo.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">短视频电商</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-timeNotice.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播预告</p>
            </li>
            <li class="colorWhite">
                <img src="img/icon-function/icon-livesetting3.png" class="funcIcon" alt="">
                <p class="colorWhite uk-margin-small-top">直播间设置</p>
            </li>
        </ul>
        <div class="phoneWrap uk-margin-medium-left"  uk-scrollspy="cls: uk-animation-slide-right">
            <div  id="functionSlide" tabindex="-1">

                <ul class="uk-slideshow-items"   uk-height-viewport="offset-top: true; offset-bottom: 25">
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/1.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/6.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/1.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/4.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/5.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/6.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/7.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/8.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/9.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/10.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/2.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/11.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/11.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="uk-position-cover" >
                            <img src="./img/funcScreen/10.png" alt="">
                        </div>
                    </li>
                </ul>

                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

            </div>
        </div>
        </div>
    </div>
</div>




    <div class="uk-margin-medium-top">
        <div class="uk-container uk-text-center">
            <h1 class=" wrapTitle uk-text-600">强有力的技术支持 品质更有保障</h1>
            <p>电商+直播+短视频+分销 让您抓住流量风口，轻松盈利</p>
            <ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center"  uk-height-match="target: li>.uk-card; row: false" uk-grid>
                <li>
                    <div class="uk-card uk-card-default uk-card-body">
                        <img src="./img/skill/icon-skill1.png" alt="">
                        <h4 class="uk-text-600">快速搭建，马上拥有自己的直播平台</h4>
                        <p class="">现成源码，支持私有化部署，快速开启直播业务，支持新功能定制，支持全平台对接开发，为你快速打造自有系统</p>
                    </div>
                </li>    <li>
                    <div class="uk-card uk-card-default uk-card-body">
                        <img src="./img/skill/icon-skill2.png" alt="">
                        <h4 class="uk-text-600">跨平台互通，引爆流量</h4>
                        <p class="">
                            支持外部推流、转播各大主流平台、直播间分发
                            支持Android、IOS主流平台开播、观看及互动
                            支持微信、抖音等主流平台播放，直接连通流量，爆炸式传播
                        </p>
                    </div>
                </li> <li>
                    <div class="uk-card uk-card-default uk-card-body">
                        <img src="./img/skill/icon-skill3.png" alt="">
                        <h4 class="uk-text-600">高并发解决方案</h4>
                        <p class="">
                            支持10万、百万、千万级瞬间高发业务
                        </p>
                    </div>
                </li> <li>
                    <div class="uk-card uk-card-default uk-card-body">
                        <img src="./img/skill/icon-skill4.png" alt="">
                        <h4 class="uk-text-600">系统安全稳定</h4>
                        <p class="">
                            底层上千个加速节点部署确保系统低延时，全面保障平台稳定运行
                        </p>
                    </div>
                </li>


            </ul>
        </div>

    </div>





    <div class="uk-container uk-margin-medium-top platform">
        <h1 class="uk-text-center wrapTitle uk-text-600">跨端支持</h1>
        <p class="uk-text-center">多端支持 接入各大流量平台</p>
        <ul class="uk-flex uk-flex-between uk-child-width-1-2 uk-child-width-1-4@s uk-margin-medium-top" uk-grid>
            <li class="uk-text-center">
                <svg class="iconCrossPlatform" aria-hidden="true">
                    <use xlink:href="#icon-yidongAPP"></use>
                </svg>
                <h4 class="uk-text-600">APP(ios+andriod)</h4>
            </li>
            <li class="uk-text-center">
                <svg class="iconCrossPlatform" aria-hidden="true">
                    <use xlink:href="#icon-pre_icon_xiaochengxu"></use>
                </svg>
                <h4 class="uk-text-600">微信小程序</h4>
            </li>
            <li class="uk-text-center">
                <svg class="iconCrossPlatform" aria-hidden="true">
                    <use xlink:href="#icon-H"></use>
                </svg>
                <h4 class="uk-text-600">H5</h4>
            </li>
            <li class="uk-text-center">
                <svg class="iconCrossPlatform" aria-hidden="true">
                    <use xlink:href="#icon-zhifubao"></use>
                </svg>
                <h4 class="uk-text-600"> 抖音、百度、支付宝等小程序</h4>
            </li>
        </ul>
    </div>
    <div class="uk-container-expand uk-margin-large-top">
    <div class="uk-container uk-margin-medium-top">
        <h1 class="uk-text-center wrapTitle uk-text-600">产品文档</h1>
        <ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-2@s uk-text-center uk-margin-medium-top"  uk-grid>
            <li class="documentLi uk-overflow-hidden">
                <div class="uk-card uk-card-default uk-card-body ">
                    <a href="https://www.yuque.com/wosmart/givw0p" target="_blank" >
                        <img src="./img/img-document1.jpg" alt="" >
                    </a>

                </div>
            </li>
            <li class="documentLi uk-overflow-hidden">
                <div class="uk-card uk-card-default uk-card-body">
                    <a href="https://www.yuque.com/wosmart/mnee86" target="_blank">
                        <img src="./img/img-document2.jpg" alt="">
                    </a>

                </div>
            </li>

        </ul>
    </div>
    <div class="uk-container-expand bottomPanel">
        <h3 class="bottomPanelText uk-text-600">快速搭建您的直播平台，助力您开拓“直播+”时代新红利</3>
    </div>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/uikit/3.5.9/js/uikit.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="//at.alicdn.com/t/font_2213030_a149zmilqn.js"></script>
<script>

    // document.oncontextmenu=function(evt){
    //     evt.preventDefault();
    // }
    // document.onselectstart=function(evt){
    //     evt.preventDefault();
    // };


    var UIkit;
    var myAnimation =anime({
        targets: '.features li',
        translateY: 20,
        easing: 'easeInOutSine',
        opacity:"1",
        delay: anime.stagger(200, {direction: 'reverse'})
    });
    let list = document.querySelectorAll('#funcUl li')
    let preview = document.getElementsByClassName('previewPhone')
    // let sliderItem =  document.getElementsByClassName('functionSlide')[0]
    for (let i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
            console.log(i)
            // sliderItem.setAttribute('index',i)
            UIkit.slideshow('#functionSlide').show(i);
        }
    }

</script>

</body>
</html>
